<template>
  <div class="header_wrapper">
    <div class="header">
        <div class="header_left" @click="$router.go(-1)">
            <div class="iconfont back-icon">&#xeb9d;</div>
        </div>
        <div class="header_center">
            {{headTitle}}
        </div>
        <slot name='header_right'></slot>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'Header',
  props: {
    headTitle: String
  },
  mounted () {
    // 获取用户信息
    this.getUserInfo()
  },
  methods: {
    ...mapActions(['getUserInfo'])
  }
}
</script>

<style lang="stylus" scoped>
  .header_wrapper
    position: fixed
    top: 0
    left: 0
    right: 0
    z-index: 99
    .header
      height: .88rem
      line-height: .88rem
      font-weight: bold
      color: #fff
      padding: 0 .2rem
      text-align: center
      font-size: .38rem
      background-image: linear-gradient(90deg, #0af, #0085ff)
      position: relative
      .header_left
        width: .40rem
        position: absolute
        top: 0
        left: .1rem
        .back-icon
          text-align: center
          font-size: .4rem
      .header_center
        font-weight: 700
      .header_right
        width: .7rem
        position: absolute
        top: 0
        right: .1rem
        span
          font-size: .45rem
</style>
